<template>
  <div class="box">
    <div class="header">
      <div class="top" v-show="flag">
        <span @click="toLogin">
          <van-cell title="hi！请登录" icon="user-o" size="large"/>
        </span>
      </div>
      <div class="bottom" v-show="!flag">
        <span @click="backLogin">
          <van-cell title="已登录" icon="user-o" size="large"/>
        </span>
      </div>
    </div>
    <div class="main">
      <div class="main-Collec">
        <span>商品收藏</span>
        <span>店铺收藏</span>
        <span>我的足迹</span>
      </div>
      <div class="main-grid">
        <van-grid>
          <van-grid-item icon="shop-o" text="待付款" />
          <van-grid-item icon="send-gift-o" text="待收货" />
          <van-grid-item icon="balance-o" text="退货/售后" />
          <van-grid-item icon="newspaper-o" text="全部订单" />
        </van-grid>
      </div>
      <div class="main-grid">
        <van-grid :column-num="5">
          <van-grid-item icon="cash-on-deliver" text="优惠卷" />
          <van-grid-item icon="balance-o" text="白条额度" />
          <van-grid-item icon="bulb-o" text="京豆" />
          <van-grid-item icon="cash-on-deliver" text="红包" />
          <van-grid-item icon="balance-list-o" text="全部资产" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog, Cell, CellGroup } from "vant";
Vue.use(Dialog);
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  name: "My",
  components: {},
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    toLogin() {
      this.$router.push("Login");
    },
    backLogin() {
      Dialog.confirm({
        message: "已登录，是否退出登录",
      })
        .then(() => {
          // on confirm
          localStorage.removeItem("token");
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.flag = false;
    } else {
      this.flag = true;
    }
  },
};
</script>

<style scoped>
.top{
  font-family: "楷体";
}
.main-Collec {
  height: 0.3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: "楷体";
}
.main-grid {
  margin-bottom: 10px;
  font-family: "楷体";
}
.header span{
  display: inline-block;
  width: 3.75rem;
}
</style>